import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';

import { Button  } from './button';

const meta:Meta<typeof Button> = {
  title: 'Button 按钮',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'], // 自动生成文档
  // 配置参数类型和控制类型
  argTypes: {
    children: {
        control: 'text',
    },
    btnType: {
        type: 'string',
        control: 'select',
        description:'按钮类型',
        options: ['primary', 'danger', 'warning', 'success', 'link']
    },
    size: {
        type: 'string',
        control: 'radio',
        options: ['sm', 'lg'],
        description:'按钮尺寸',
    },
    disabled: {
        type: 'boolean',
        control: 'boolean',
        description:'按钮是否禁用',
    }
  },
  args: { onClick: fn() },
}

export default meta;

type Story = StoryObj<typeof meta>;


export const DefaultBtn: Story = {
  args: {
    children: 'Button',
  },
};
DefaultBtn.storyName = '默认样式的按钮'


export const BtnType: Story = {
    args:{
        children:'Button'
    },
    render:() =>(
        <>
            <Button btnType="default">default button</Button>&nbsp;
            <Button btnType="primary">primary button</Button>&nbsp;
            <Button btnType="danger">danger button</Button>&nbsp;
            <Button btnType="success">success button</Button>&nbsp;
            <Button btnType="warning">warning button</Button>&nbsp;
            <Button btnType="link" href='http://www.baidu.com'>link</Button>&nbsp;
        </>
    )
}
BtnType.storyName = '不同类型的按钮'

export const BtnSize: Story = {
    args:{
        children:'Button'
    },
    render:() => (
        <>
            <Button size='lg'>large button</Button>&nbsp;
            <Button>large button</Button>&nbsp;
            <Button size='sm'>small button</Button>&nbsp;
        </>
    )
}
BtnSize.storyName = '不同尺寸的按钮'
